import { useCallback, useEffect, useState } from 'react';
import { List, SpinLoading } from 'antd-mobile';
import { queryStringParse,useEvents } from '@inbiz/utils';
import { TextWidget } from '@inbiz/react';
import { getDetail, getNewsList as getNewsListData } from '../../../service';

const Detail = (props: any) => {
  const params = queryStringParse();
  // 详情内容
  const [detailInfo, $detailInfo] = useState<News.NewsItem>();
  // 其他新闻列表
  const [otherNewsList, $otherNewsList] = useState<Array<News.NewsItem>>([]);

  const [loadding, $loadding] = useState<boolean>(true);

  const [configEvents] = useEvents(props.callBackEvents, props.emit)

  const getNewsList = useCallback(async (params: object) => {
      const newParams = (await configEvents.current?.onParams?.(params)) || params;
      const data = await (configEvents.current?.onRequest || getNewsListData)(newParams as any)
      return await configEvents.current?.onData?.(data) || data
    }, []);

  // 初始化
  useEffect(() => {
    getInfo(params.newsId, params.cateId);
  }, []);

  // 获取页面内容
  const getInfo = async (id?: string, cid?: string) => {
    const newsId = id || params?.newsId;
    const cateId = cid || params?.cateId;

    if (!newsId) return $loadding(false);

    // 详细内容
    const infoRes: News.NewsItem = await getDetail({ id: newsId });
    $detailInfo(infoRes);

    //其他新闻列表
    const res: News.NewsList = await getNewsList({
      categoryId: cateId,
      pageIndex: 1,
      pageSize: 999,
      showNew: true,
      numNew: 10,
    });
    let arr: any = res?.ContentList || [];
    arr = arr.filter((item: any) => item.ID !== newsId).slice(0, 5);

    $otherNewsList(arr);
    $loadding(false);
  };

  return loadding ? (
    <div style={{ paddingTop: '95px', paddingLeft: '50%' }}>
      <SpinLoading />
    </div>
  ) : (
    <div className="detail">
      {/* 详情主要内容 */}
      <div className="detail-body">
        <div className="detail-main">
          <div className="detail-title">{detailInfo?.Title}</div>
          <div className="detail-summary">
            <TextWidget>News.tips.abstract</TextWidget>：
            <span dangerouslySetInnerHTML={{ __html: detailInfo?.Summary || '' }}></span>
          </div>
          <div className="detail-creat">
            <span>
              {detailInfo?.Creator} &nbsp;
              {detailInfo?.CreateTimeStr}
            </span>
            <span>{detailInfo?.ContentCategoryName}</span>
          </div>
          <div
            className="detail-content"
            dangerouslySetInnerHTML={{ __html: detailInfo?.Content || '' }}
          ></div>
        </div>

        {/* 更多新闻列表 */}
        <div className="detail-more">
          <div className="detail-more-title">
            <TextWidget>News.tips.more_new_notice</TextWidget>
          </div>
          <List>
            {otherNewsList.map((item) => (
              <List.Item
                clickable={false}
                onClick={() => props.goToDetail(item, params.cateId)}
                key={item.ID}
              >
                {item.Title}
              </List.Item>
            ))}
          </List>
        </div>
      </div>
    </div>
  );
};

export default Detail;
